<script setup>
import { showToast } from 'vant';
import { computed, ref } from 'vue'
import { getbanner, getgoid } from '../../api/home'
import { useRoute, useRouter } from 'vue-router';
import { showSuccessToast, showFailToast } from 'vant';
// import exciting from '@/compoments/exciting.vue'
const route = useRoute()
const router = useRouter()
const bannerdata = ref('')
const goiddata = ref('')

getbanner().then(res => {
    // console.log(res.data);
    bannerdata.value = res.data.data
})
getgoid().then(res => {
    // console.log(res.data.data);
    goiddata.value = res.data.data
})

function onClickRight() {
    // console.log(1111);
    // console.log(router);
    router.push('/step1')
}
function res1(value) {
    // console.log(value.code, '=====');
    if (value.text === '美食') {
        router.push('/step2')
    } else if (value.text === '会员码') {
        router.push('/grid4')
    }
    else {
        console.log(111);
        showFailToast('抱歉，功能暂未开放');

    }


}

function bannerlist() {
    router.push('/step3')
}
function bannerlist1() {
    router.push('/step4')
}
function bannerlist2() {
    router.push('/step5')
}

function clickadd() {
    // console.log(111);
    router.push('/step7')
}

function clickadd1() {
    router.push('/assia1')

}

function clickadd2() {
    router.push('/draw')

}
</script>

<template>
    <div class="box">
        <van-nav-bar title="主页" right-text="精彩推放" @click-right="onClickRight">
            <!-- <exciting></exciting> -->
        </van-nav-bar>
        <div class='content'>

            <!-- @click-left="onClickLeft"  -->
            <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
                <van-swipe-item v-for="item in bannerdata" :key="item.id">
                    <van-image :src=item.img />
                </van-swipe-item>
            </van-swipe>

            <van-grid :column-num="5">
                <van-grid-item v-for="value in goiddata" :key="value.id" :icon="value.img" :text="value.text"
                    @click="res1(value)" />
            </van-grid>
            <van-cell-group>
                <van-cell title="咖推荐" value=">" @click="clickadd" />

            </van-cell-group>
            <div class="top1">

                <div class="top2" @click="clickadd"></div>
                <div class="top2" @click="clickadd1"></div>
                <div class="top2" @click="clickadd2"></div>

            </div>
            <h3>打咖圣地</h3>
            <div class="top3">
                <div class="top4" @click="bannerlist"></div>
                <div class="top4" @click="bannerlist1"></div>
                <div class="top4" @click="bannerlist2"></div>
            </div>



        </div>
    </div>
</template>


<style lang="scss" scoped>
// .my-swipe .van-swipe-item {
//     color: #fff;
//     font-size: 20px;
//     line-height: 150px;
//     text-align: center;
//     background-color: #39a9ed;
// }

// .custom-indicator {
//     position: absolute;
//     right: 5px;
//     bottom: 5px;
//     padding: 2px 5px;
//     font-size: 12px;
//     background: rgba(0, 0, 0, 0.1);
// }

.top1 {
    width: 100%;
    height: 1.8rem;
    // background-color: #39a9ed;
    display: flex;
    overflow: auto;
    // margin-bottom: .1rem;
}

.top2 {
    width: 70%;
    height: 1.5rem;
    margin-right: .1rem;
    background-color: blueviolet;
    flex-shrink: 0;
    border-radius: .2rem;
    // background: url(https://img.zcool.cn/community/018436594cfae1a8012193a3e5b98e.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100) no-repeat 100%/cover;

}

h3 {

    margin-left: .1rem;
    margin-bottom: .1rem;
    margin-top: .1rem;
}


.top3 {
    width: 100%;
    height: 1.5rem;
    // background-color: #39a9ed;
    display: flex;
    overflow: auto;

}

.top4 {
    width: 70%;
    height: 100%;
    margin-right: .1rem;
    background-color: blueviolet;
    flex-shrink: 0;
    border-radius: .2rem;
    background: url(https://img2.baidu.com/it/u=353162769,2413656333&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800,100) no-repeat 100%/cover;

}


.van-swipe-item {
    height: 1.5rem;
}

.top3 div:nth-child(1) {
    background: url(https://img0.baidu.com/it/u=1800495548,2143705589&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333) no-repeat 100%/cover;
}

.top3 div:nth-child(2) {
    background: url(https://img0.baidu.com/it/u=2084567683,3804191157&fm=253&fmt=auto&app=138&f=JPEG?w=525&h=350) no-repeat 100%/cover;
}

.top3 div:nth-child(3) {
    background: url(https://img2.baidu.com/it/u=3624527063,472354744&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500) no-repeat 100%/cover;
}

.top1 div:nth-child(1) {
    background: url(https://img1.baidu.com/it/u=148440419,2591094356&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500) no-repeat 100%/cover;
}

.top1 div:nth-child(2) {
    background: url(https://img2.baidu.com/it/u=62324358,3606067728&fm=253&fmt=auto&app=138&f=JPEG?w=543&h=342) no-repeat 100%/cover;
}

.top1 div:nth-child(3) {
    background: url(https://img1.baidu.com/it/u=1367714260,1933744731&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500) no-repeat 100%/cover;
}


.van-image {
    width: 100%;
    height: 150%;
}

.van-swipe-item {
    height: 15%;
}

// .box {
//     background-color: rgba(0, 255, 255, 0.095);
// }

// .van-nav-bar {
//     background-color: rgba(0, 255, 255, 0.095);

// }

// .van-cell {
//     background-color: rgba(0, 255, 255, 0.095);

// }

// .van-grid {
//     background-color: rgba(0, 255, 255, 0.095);

// }

// .footer {
//     background-color: rgba(0, 255, 255, 0.095);

// }
</style>